<template>
  <view class="refund-progress-page">
    <!-- 标题 -->
    <view class="page-header">
      <text class="page-title">取消进度</text>
    </view>

    <!-- 退货进度条 -->
    <view class="progress-container">
      <u-steps 
        :current="currentStep" 
        direction="column"
        active-color="#FF9500"
        dot
      >
        <u-steps-item 
          v-for="(step, index) in steps" 
          :key="index"
          :title="step.title" 
          :desc="step.desc"
        >
          <view slot="icon" class="custom-icon" v-if="index <= currentStep">
            <u-icon 
              name="checkmark" 
              color="#fff" 
              size="12"
            ></u-icon>
          </view>
        </u-steps-item>
      </u-steps>
    </view>

    <!-- 退款信息卡片 -->
    <view class="refund-card">
      <view class="card-header">
        <text class="card-title">退款信息</text>
      </view>
      <view class="card-content">
        <view class="info-item">
          <text class="info-label">退款金额：</text>
          <text class="info-value">¥168.00</text>
        </view>
        <view class="info-item">
          <text class="info-label">退款方式：</text>
          <text class="info-value">原路退回（支付宝）</text>
        </view>
        <view class="info-item">
          <text class="info-label">预计到账：</text>
          <text class="info-value">1-5个工作日</text>
        </view>
      </view>
    </view>

    <!-- 客服图标 -->
    <view class="customer-service" @click="openChat">
      <u-icon name="server-fill" color="#FF9500" size="40"></u-icon>
      <text class="service-text">联系客服</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 2, // 当前步骤索引
      steps: [
        {
          title: "提交退货申请",
          desc: "2018.08.18 08:08"
        },
        {
          title: "退货审核通过",
          desc: "2018.08.19 10:30"
        },
        {
          title: "退款成功",
          desc: "2018.08.20 14:20"
        }
      ]
    };
  },
  methods: {
    openChat() {
      uni.showToast({
        title: '正在联系客服...',
        icon: 'none'
      });
      // 这里可以调用实际打开客服聊天窗口的方法
    }
  }
};
</script>

<style lang="scss" scoped>
.refund-progress-page {
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.page-header {
  margin-bottom: 30px;
  text-align: center;
}

.page-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.progress-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.custom-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #FF9500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.refund-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 15px;
}

.card-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.info-item {
  display: flex;
  margin-bottom: 12px;
  font-size: 14px;
}

.info-label {
  color: #666;
  width: 80px;
}

.info-value {
  flex: 1;
  color: #333;
}

.customer-service {
  position: fixed;
  right: 20px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-text {
  font-size: 12px;
  color: #FF9500;
  margin-top: 5px;
}
</style>